<template>
  <div class="layouts_container">
    <div class="upperBox-OfContent">
      <router-view/>
    </div>
    <div class="underBox-SwitchChover">
      <router-link to='/springRain'><i class="iconfont icon-fenlei"/>春雨</router-link>
      <router-link to='/shoppingMall'><i class="iconfont icon-store_icon"/>商城</router-link>
      <router-link to='/popularization'><i class="iconfont icon-dianlikepu"/>科普</router-link>
      <router-link to='/mine'><i class="iconfont icon-wode"/>我的</router-link>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='scss'>
.layouts_container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f5f5f5;
    .upperBox-OfContent{
      flex: 1;
      overflow-y: scroll;
    }
    .underBox-SwitchChover{
      width: 100%;
      height: 57px;
      background: #ffffff;
      border: 1px solid #e1e1e1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:0 40px;
      a{
        text-decoration: none;
        color:#aeaeae;
        display: flex;
        font-size: 10px;
        flex-direction: column;
        text-align: center;
        margin-top: 5px;
        .iconfont{
          font-size: 20px;
          padding-bottom: 5px;
        }
      }
      .router-link-active{
        color:tomato;
      }
    }
}
</style>
